<template>
  <div class='app-container'>

      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="会议名称">
          <el-input v-model="queryParams.meetingName" placeholder="请输入" clearable @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="会议部门">
          <el-input v-model="queryParams.meetingDept" placeholder="请输入" clearable @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="会议时间">
          <el-date-picker v-model="queryParams.meetingTime" type="daterange" range-separator="" start-placeholder=""
            end-placeholder="">
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button size="mini" type="primary" icon="el-icon-plus"  @click="open()">
          创建会议申请
        </el-button>
      </el-col>
    </el-row>
      

      <el-table v-loading="loading" :data="tableData" border>
        <el-table-column prop="applyNo" label="编号" align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="meetingName" label="会议名称" align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="meetingDept" label="会议部门" align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="applyStatus" label="审批状态" align="center" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.applyStatus == '0'" type="info">草稿</el-tag>
            <el-tag v-else-if="scope.row.applyStatus == '1'" type="success">处理中</el-tag>
            <el-tag v-else-if="scope.row.applyStatus == '2'" type="danger">撤回</el-tag>
            <el-tag v-else-if="scope.row.applyStatus == '3'" type="danger">退回</el-tag>
            <el-tag v-else-if="scope.row.applyStatus == '4'">办结</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="levelName" label="会议室位置" align="center" width="220" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="会议开始时间" align="center" width="280" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span class="contText">{{ scope.row.meetingBeginTime}}</span>
          </template>

        </el-table-column>
        <el-table-column label="会议结束时间" align="center" width="280" :show-overflow-tooltip="true"> 
          <template slot-scope="scope">
            <span class="contText">{{scope.row.meetingEndTime }}</span>
          </template>

        </el-table-column>
        
        <el-table-column prop="address" label="操作" align="center">
          <template slot-scope="scope">
            <el-tooltip content="撤回" placement="top">
              <el-button class="editor" v-if="scope.row.applyStatus == 1 ? true : false" size="mini" type="warning"
                icon="el-icon-refresh-left" circle @click="handleCancel(scope.row)"></el-button>
            </el-tooltip>
            <el-tooltip content="详情" placement="top">
              <el-button icon="el-icon-search" size="mini"  circle @click="handleEdit(scope.row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination background :current-page="currentPage" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" :page-sizes="[10, 20, 30, 50]" :page-size="100"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>


      <!-- 新增 -->
      <el-dialog :title="title" :visible.sync="dialogVisible"   v-if="dialogVisible">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="会议名称:" prop="meetingName">
                <el-input  v-model="ruleForm.meetingName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item  label="会议部门:" prop="meetingDept">
                <treeselect  v-model="ruleForm.meetingDept" placeholder="请选择会议部门" :options="deptOptions" @select="selectDepart" style="width:100%"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="会议时间:"  prop="meetingTime">
                <el-date-picker  v-model="ruleForm.meetingTime" type="datetimerange" style="width:100%"
                  start-placeholder="" end-placeholder="" value-format="yyyy-MM-dd hh:mm:ss"
                  :default-time="['12:00:00', '08:00:00']">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="会议室位置:"  prop="meetingLocation">
                <!-- <el-input  v-model="ruleForm.material"></el-input> -->
                <el-select v-model="ruleForm.meetingLocation" filterable placeholder="请选择会议室" style="width:100%">
                  <el-option
                    v-for="item in locationList"
                    :key="item.id"
                    :label="item.levelName"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="参会人:"  prop="personList">
                
                <el-select v-model="ruleForm.personList" multiple placeholder="请选择" style="width:100%">
                  <el-option v-for="item in personList" :key="item.id" :label="item.userName" :value="item.userName">
                    {{ item.userName }}
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="参会人数量:"  prop="number">
                <el-input-number v-model="ruleForm.number" controls-position="right" @change="handleChange"
                  :min="1" :max="50">
                </el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="会议物资:"  prop="professionalName">
            <el-checkbox-group v-model="checkedCities" >
              <div class="qq" v-for="item in suppliesList" :key="item.dictValue" :value="item.dictValue">
                <div>
                  <el-checkbox :label="item.id" :key="item.id">{{ item.dictLabel }}</el-checkbox>
                </div>
                <div class="dw">
                  <el-input-number style="margin-left: 15px;" v-model="item.suppliesNum" controls-position="right"
                    @change="handleChange" :min="1" :max="50">
                  </el-input-number>
                </div>
              </div>
            </el-checkbox-group>
          </el-form-item>


        </el-form>

        <!--审批记录-->
      <el-collapse v-if="ruleForm.id">
        <el-collapse-item title="流程审批记录" name="1">
          <el-timeline style="margin-top: 5px;">
            <el-timeline-item v-for="(activity, index) in activities" :key="index"
              :color="activity.endTime?'#0bbd87':''" :timestamp="parseTime(activity.startTime)">
              <el-tag v-if="activity.endTime" type="success">已处理</el-tag>
              <el-tag v-else type="info">未处理</el-tag>
              {{activity.taskName}} {{activity.description}}
            </el-timeline-item>
          </el-timeline>
        </el-collapse-item>
      </el-collapse>

        <span slot="footer" class="dialog-footer"  v-if="!ruleForm.id">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="add()">确 定</el-button>
        </span>
      </el-dialog>


  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { getList, getcanList, getaddList, getattendeeList,locationTypeList,findMeetingApplyDetail } from "@/api/workflow/conferenCeroom";
import { treeselect } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { doesNotMatch } from "assert";
import {historyWorkFlowList} from "@/api/workflow/todo"

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    Treeselect,
  },
  data() {
    // 这里存放数据
    return {
      title:'新增会议室预定',
      loading: false,
      checkedCities: [],
      deptOptions:[],//部门集合
      checked: '',
      total: null,
      currentPage: 1,
      dialogVisible: false,
      // 显示搜索条件
      showSearch: true,
      activities:[],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      data: {
        applyDesc: "",
        applyID: "",
        applyTitle: "",
        approvedBy: "",
        attachment: "",
        businessKey: "",
        currNode: "",
        flag: 0,
        lastNode: "",
        processInstanceId: "",
        taskId: "",
        variables: {}
      },
      tableData: [],
      form: {
        applyNo: '',
        applyStatus: '',
        createBy: '',
        createTime: '',
        id: 0,
        meetingBeginTime: '',
        meetingDept: '',
        meetingEndTime: '',
        meetingLocation: '',
        meetingModerator: '',
        meetingName: '',
        modifyBy: '',
        modifyTime: '',
        number: '',
        processId: '',
      },
      ruleForm: {
        meetingName: '',
        meetingDept: '',
        meetingBeginTime: '',
        meetingEndTime: '',
        meetingLocation: '',
        meetingModerator: '',
        number: '',
        applyStatus: '1',
        suppliesList: [],
        personList: [],
        
      },
      personList: [{
        suppliesId: "",
        isSign: "",
        isRemind: "",
      }],

      chr: {
        pageNum: 1,
        pageSize: 10,
        username: "",
      },
      suppliesList: [{
        suppliesId: '',
        suppliesNum: '1',
      }],
      rules: {
        meetingName: [
          { required: true, message: '请输入会议名称', trigger: 'blur' }
        ],
        meetingDepartment: [
          { required: true, message: '请输入会议部门', trigger: 'blur' }
        ],
        meetingTime: [
          { required: true, message: '请输入会议时间', trigger: 'blur' }
        ],
        meetingLocation:[
        { required: true, message: '请前选择会议室', trigger: 'blur' }
        ]
      },
      locationList:[]

    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    historyWorkFlowList (row) {
        //查询审批历史记录
        historyWorkFlowList({ processInstanceId: row.processId }).then(resp => {
          console.log(resp)
          this.activities = resp.data
        })
      },
    getLocationList(){
      //查询会议室信息
      locationTypeList({locationType:"7"}).then(resp=>{
        this.locationList = resp.data
      })
    },
    cancel() {
      this.dialogVisible = false;
      this.rest();
      this.att()
      // this.$refs.ruleForm.resetFields();
      // this.checkedCities = [];
      // this.$forceUpdate();
    },
    getList() {
      this.loading = true
      getList(this.queryParams).then(res => {
        console.log(res)
        this.tableData = res.data.list
        this.total = res.data.total
        this.loading = false
      })

    },
    handleCancel(row){
      this.data.processInstanceId = row.processId
      getcanList(this.data).then(response => {
        console.log(response)
      })
      this.getList()
    },
    handleEdit(row) {
      // console.log(row)
      this.getTreeselect();
      this.getLocationList()
      this.dialogVisible = true;
      this.title = '会议预定详情'
      this.getDetailsInfo(row)
      this.historyWorkFlowList(row)
    },
    getDetailsInfo(row){
      findMeetingApplyDetail(row.processId).then(resp=>{
        this.ruleForm = resp.data
        this.ruleForm.meetingTime=[this.ruleForm.meetingBeginTime,this.ruleForm.meetingEndTime]
        this.ruleForm.meetingLocation = Number(this.ruleForm.meetingLocation)
        this.ruleForm.personList = resp.data.personList.map(item => {
            return item.userName
        })
        this.checkedCities = resp.data.suppliesList.map(item => {
          return Number(item.suppliesId)
        })
        this.suppliesList.map(item=>{
          for(let i=0;i<resp.data.suppliesList.length;i++){
            if(item.id==resp.data.suppliesList[i].suppliesId){
              item.suppliesNum = resp.data.suppliesList[i].suppliesNum
              return item
            }
          }
        })
        console.log(this.ruleForm.personList)


      })
    },
    //重置
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    //搜索
    handleQuery() {
      this.getList()
    },
    handleChange() {

    },
    rest() {
      this.ruleForm = {
        meetingName: '',
        meetingDept: null,
        meetingBeginTime: '',
        meetingEndTime: '',
        meetingLocation: '',
        meetingModerator: '',
        applyStatus: '1',
        number: '',
        suppliesList: [],
        personList: [],
      }
    },
    handleSizeChange(zhi) {
      this.queryParams.pagesize = zhi;
      this.getList();
    },
    handleCurrentChange(zhi) {
      this.queryParams.pageNum = zhi;
      this.getList();
    },
    getTreeselect(){
      treeselect().then(res=>{
        this.deptOptions = res.data
      })
    },
    selectDepart(val){
      this.ruleForm.meetingDeptName = val.label
    },
    open() {
      this.rest();
      this.dialogVisible = true;
      this.title = '新增会议室预定'
      this.getTreeselect();
      this.getLocationList()
      this.getDicts("meeting_supplies").then(response => {
        console.log(response)
        this.suppliesList = response.data;
        this.suppliesList = this.suppliesList.map(item => {
          this.$set(item, "suppliesNum", 1)
          // item.suppliesNum= 1;
          return item;
        })
        this.$forceUpdate();
        console.log(response)

      });
     
      // this.ruleForm= { brand_right: 0 }
      // this.$refs.ruleForm.resetFields()
    },
    add() {
      this.$forceUpdate();
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.ruleForm.meetingBeginTime = this.ruleForm.meetingTime[0];
          this.ruleForm.meetingEndTime = this.ruleForm.meetingTime[1];
          var arr = this.checkedCities.map(item => {
            return {
              suppliesId: item.id,
              suppliesNum: item.suppliesNum
            }
          })
          var obj = this.ruleForm.personList.map(item => {
            return {
              userName: item,
              isSign: "0",
              isRemind: "0",
            }
          })
          console.log(arr, 'arr');
          this.ruleForm.suppliesList = arr
          this.ruleForm.personList = obj
          getaddList(this.ruleForm).then(res => {
            console.log(res)
            this.getList();
          })
          this.dialogVisible = false

        } else {
          console.log('error submit!!');
          return false;
        }
      });

    },
    att() {
      getattendeeList(this.chr).then(res => {
        console.log(res)
        this.personList = res.data.list
      })
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.att();
    this.getList()
    this.getDicts("meeting_supplies").then(response => {
      console.log(response)
      this.suppliesList = response.data;
      this.suppliesList = this.suppliesList.map(item => {
        this.$set(item, "suppliesNum", 1)
        // item.suppliesNum= 1;
        return item;
      })
      this.$forceUpdate();
      console.log(response)
    });
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() { }, // 生命周期 - 创建之前
  beforeMount() { }, // 生命周期 - 挂载之前
  beforeUpdate() { }, // 生命周期 - 更新之前
  updated() { }, // 生命周期 - 更新之后
  beforeDestroy() { }, // 生命周期 - 销毁之前
  destroyed() { }, // 生命周期 - 销毁完成
  activated() { } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
// @import url(); 引入公共css类
.add {
  margin-top: 5px;
  height: 34px;

}

.form {
  margin-top: 30px;
}

.pag {
  width: 96%;
  height: 80px;
  background-color: #fff;
  margin-left: 30px;
}

.el-pagination {
  margin-top: 25px;
  float: right;
  margin-bottom: 25px;

}


// .mat_40 {
//   margin-left: 40px;
// }

.el-input-number {
  width: 100px;

}

.kuang {
  width: 328px;
}

.contText {
  font-size: 13px;
}
.qq{
  position: relative;
}
.dw{
  position: absolute;
  top: 0px;
  left: 60px;
}
</style>
